<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=640, initial-scale=1"/>
<title>Minimal Web Audio and Video Example</title>
<style type="text/css">
		body {
			background: #333;
			text-align: center;
			margin-top: 10%;
		}
		#videoCanvas {
			/* Always stretch the canvas to 640x480, regardless of its
			internal size. */
			width: 640px;
			height: 480px;
		}
</style>
<script type="text/javascript" src="audio/audio-worker-node.js"></script>
<script type="text/javascript" src="audio/audio-stream-player.js"></script>
<script type="text/javascript" src="jsmpg.js"></script>
</head>
<body>

<!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg will
		change this internal resolution to whatever the source provides. The size the
		canvas is displayed on the website is dictated by the CSS style.
	-->
	<canvas id="videoCanvas" width="640" height="480">
		<p>
			Please use a browser that supports the Canvas Element, like
			<a href="http://www.google.com/chrome">Chrome</a>,
			<a href="http://www.mozilla.com/firefox/">Firefox</a>,
			<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
		</p>
	</canvas>

<script language="JavaScript">

	try {

		// audio
		var audioPlayer = new WebSocketAudioStreamPlayer();
		audioPlayer.Open('ws://127.0.0.1:9400/test');
	
	} catch (e) {
	
		console.error('Audio player error: ' + e);
		
	}

	// video (by jsmpeg)
	var client = new WebSocket( 'ws://127.0.0.1:9200/test' );
	var canvas = document.getElementById('videoCanvas');
	var player = new jsmpeg(client, {canvas:canvas});
	
	
</script>

<div id="videoarea"></div>

</body></html>
